<script lang="ts">
export default {
  name: "Bar"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onBeforeMount, onMounted, nextTick, ref } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
// import { useAppStoreHook } from "/@/store/modules/app";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

// const pureApp = useAppStoreHook();

const bar = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

function initechartInstance() {
  const echartDom = document.querySelector(".bar");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    color: ["#00e6ad", "#59a0ff", "#ffc500"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {},
    grid: {
      bottom: "20%",
      height: "68%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          interval: 0,
          width: "70",
          overflow: "truncate"
        },
        data: ["open_issues", "forks", "watchers", "star"]
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "open_issues",
        type: "bar",
        stack: "total",
        data: [3, 204, 600, 1079]
      },
      {
        name: "forks",
        type: "bar",
        stack: "total",
        data: [87, 204, 500, 1209]
      },
      {
        name: "watchers",
        type: "bar",
        stack: "total",
        data: [87, 204, 500, 1209]
      },
      {
        name: "star",
        type: "bar",
        stack: "total",
        data: [87, 204, 500, 1209]
      }
    ]
  });
}

onBeforeMount(() => {
  nextTick(() => {
    initechartInstance();
  });
});

onMounted(() => {
  nextTick(() => {
    addResizeListener(bar.value, resetRender);
    // useEventListener("resize", () => {
    //   resetRender();
    // });
  });
});

// watch();
// () => pureApp.sidebar.opened,
// () => {
//   // resetRender()
//   if(pureApp.sidebar.opened){
//     echartInstance.dispose();
//     echartInstance = null;
//     useTimeoutFn(() => {
//       nextTick(() => {
//         initechartInstance();
//       })
//     }, 300);
//   }
// }

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(bar.value, resetRender);
});
</script>

<template>
  <div ref="bar">
    <div class="title">
      <slot> </slot>
    </div>
    <div class="bar"></div>
  </div>
</template>

<style scoped lang="scss">
.title {
  font-size: 16px;
  color: $defaultColor;
  margin: 10px 0;
  height: 24px;
}
.bar {
  width: 100%;
  height: 35vh;
}
</style>
